<template>
   <div>
     <!-- 面包屑 -->
     <Breadcrumb first='商品管理' second='商品列表' thirdly='添加商品'></Breadcrumb>
     <!-- 卡片 -->
     <el-card class="box-card">
        <!-- Alert 警告 -->
        <el-alert
          title="消息提示的文案"
          type="info"
          center
          :closable="false"
          show-icon>
        </el-alert>
        <!-- Alert 警告 -->
        <br>
        <!-- 步骤条 -->
        <el-steps :space="200" :align-center="true" :active="parseInt(something)" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <!-- 步骤条 -->
        <br>
        <br>
        <!-- 标签页 -->
        <el-tabs tab-position="left" v-model="something" :before-leave="tab">
          <el-tab-pane name="0" label="基本信息">
            <!-- 表单 -->
            <el-form label-position="top" :model="roleFrom" ref="roleFrom" :rules="rules" label-width="100px" class="demo-ruleForm">
              <el-form-item
                label="商品名称"
                prop="goods_name"
              >
                <el-input v-model="roleFrom.goods_name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="商品价格"
                prop="goods_price"
              >
                <el-input v-model="roleFrom.goods_price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="商品重量"
                prop="goods_weight"
              >
                <el-input v-model="roleFrom.goods_weight" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="商品数量"
                prop="goods_number"
              >
                <el-input v-model="roleFrom.goods_number" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="商品分类"
                prop="goods_cat"
              >
                <!-- 级联选择器 -->
                <el-cascader
                  v-model="value"
                  :options="options"
                  :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name'}"
                  @change="handleChange">
                </el-cascader>
              </el-form-item>
                <!-- 级联选择器 -->
            </el-form>
            <!-- 表单 -->
          </el-tab-pane>
          <el-tab-pane name="1" label="商品参数">
            <div class="commodityParameters" v-for="item in commodityParameters" :key="item.attr_id" >
              <br>
              <div>{{item.attr_name}}</div>
              <div style="display:inline-block" v-for="(obj, index) in item.attr_vals" :key="index">
                  <el-checkbox v-if="obj"  v-model="obj.type" :label="obj.attr_value" border ></el-checkbox>
                  &nbsp;
              </div>
              <br>
            </div>
          </el-tab-pane>
          <el-tab-pane name="2" label="商品属性">
            <div v-for="item in commodityProperty" :key="item.attr_id">
                <div>
                  <div>{{item.attr_name}}</div>
                  <el-input v-model="item.attr_vals" placeholder="请输入内容"></el-input>
                  &nbsp;
                </div>
                <br>
            </div>
          </el-tab-pane>
          <el-tab-pane name="3" label="商品图片">
            <el-upload
              action="https://www.liulongbin.top:8888/api/private/v1/upload"
              :headers="headers"
              list-type="picture-card"
              :on-success="handleAvatarSuccess"
              :auto-upload="true">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane name="4" label="商品内容">
             <quill-editor v-model="roleFrom.goods_introduce"
                ref="myQuillEditor"
                :options="editorOption">
              </quill-editor>
              <el-button type="primary" @click="achieve">提交按钮</el-button>
          </el-tab-pane>
        </el-tabs>
        <!-- 标签页 -->
      </el-card>
   </div>
</template>
<script>
// addAttributesApi
import { categoriesApi, addAttributesApi, addGoodsApi } from '@/api'
export default {
  created () {
    categoriesApi().then(res => {
      this.options = res.data.data
    }) // 请求商品类别数据
  },
  data () {
    return {
      something: 0, // 步骤条和标签页的链接
      roleFrom: {
        goods_name: '', // 名称
        goods_cat: '', // 分类id
        goods_price: '', // 价格
        goods_number: '', // 数量
        goods_weight: '', // 重量
        goods_introduce: '', // 介绍
        pics: [],
        attrs: []
      }, // 提交需要的数据
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入商品中数量', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
        ],
        goods_cat: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ]
      }, // 表单验证
      value: [],
      options: [], // 级联选择器
      checked1: '',
      input: '',
      commodityParameters: [], // 商品参数
      commodityProperty: [], // 商品属性
      dialogImageUrl: '', // 上传图片的暂存区
      dialogVisible: false,
      disabled: false,
      headers: {
        Authorization: localStorage.getItem('token')
      },
      content: '<h2></h2>',
      editorOption: {
        // some quill options
      },
      n: 0,
      n1: 0

    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    handleChange (value) {
      if (value.length === 3) {
        this.roleFrom.goods_cat = value.join(',') // 事件触发将value的类容转换为字符串放到请求数据的参数里面去
      } else {
        this.$message({
          message: '必须是三级',
          type: 'warning'
        })
        this.value = []
      }
    }, // 级联选择器事件
    tab (newInd, wornInd) {
      let temp = 'null'
      if (wornInd === '0') {
        this.$refs.roleFrom.validate((valid) => {
          if (valid) {
            temp = true
          } else {
            temp = false
          }
        })
      }
      if (temp) {
        if (newInd === '1' && this.n === 0) {
          console.log(newInd)
          console.log(this.n)
          this.n++
          addAttributesApi(this.value[this.value.length - 1], 'many').then(res => {
            res.data.data.forEach(obj => {
              obj.attr_vals = obj.attr_vals.split(',').map(item => {
                if (item !== '') {
                  return { attr_value: item, type: true }
                }
              })
            })
            this.commodityParameters = res.data.data
          })
        } else if (newInd === '2' && this.n1 === 0) {
          this.n1++
          addAttributesApi(this.value[this.value.length - 1], 'only').then(res => {
            this.commodityProperty = res.data.data
          })
        }
      }
      return temp
    }, // 切换时Tab标签时的钩子函数
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleAvatarSuccess (response) {
      this.roleFrom.pics.push({ pic: response.data.tmp_path })
    }, // 上传成功的回调函数
    achieve () {
      const tame = []
      // 将静态动态参数放到要提交的文件里面去
      this.commodityParameters.forEach(obj => {
        if (obj.attr_vals instanceof Array) {
          obj.attr_vals.forEach(item => {
            if (item.type) {
              tame.push(item.attr_value)
            }
          })
          this.roleFrom.attrs.push({
            attr_id: obj.attr_id,
            attr_vale: tame.join(',')
          })
        } else {
          this.roleFrom.attrs.push({
            attr_id: obj.attr_id,
            attr_vale: obj.attr_vals
          })
        }
      })
      this.commodityProperty.forEach(obj => {
        this.roleFrom.attrs.push({
          attr_id: obj.attr_id,
          attr_vale: obj.attr_vals
        })
      })
      addGoodsApi(this.roleFrom).then(res => {
        if (res.data.meta.status === 201) {
          // this.$router.push('/goods')
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
        } else {
          this.$message.error(res.data.meta.msg)
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
  /deep/.el-form-item__label{
    display: block;
  }
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /deep/.ql-editor {
    height: 272px !important;
  }
</style>
